<!--

  Vant组件库中的时间选择器

  // 带*号表示必填属性
  props: 
    type:(String)                                时间类型     可选值为 date time year-month month-day datehour
    title:(String)                               顶部栏标题
    confirm-button-text:(String)                 确认按钮文字
    cancel-button-text:(String)                  取消按钮文字
    show-toolbar:(Boolean)                       是否显示顶部栏
    loading:(Boolean)                            是否显示加载状态
    readonly:(Boolean)                           是否为只读状态，只读状态下无法切换选项
    filter:(Function)                            选项过滤函数
    formatter:(Function)                         选项格式化函数
    item-height:(Number || String)               选项高度     支持 px vw vh rem 单位，默认 px
    visible-item-count:(Number || String)        可见的选项个数
    swipe-duration:(Number || String)            快速滑动时惯性滚动的时长,单位ms
    min-date:(Date)	                             可选的最小时间，精确到分钟
    max-date:(Date)                              可选的最大时间，精确到分钟

  slot: 
    default           自定义整个顶部栏的内容	 -
    title             自定义标题内容	        -
    confirm           自定义确认按钮内容	    -
    cancel            自定义取消按钮内容	    -
    option            自定义选项内容	       option: string | object
    columns-top       自定义选项上方内容	    -
    columns-bottom    自定义选项下方内容	    -

  event: 
    change	              当值变化时触发的事件	          picker: Picker 实例
    confirm	              点击完成按钮时触发的事件	      value: 当前选中的时间
    cancel	              点击取消按钮时触发的事件	      -

  demo: 
    <qm-datetime-picker
      title="选择日期"
      :formatter="formatter"
      :min-date="minDate"
      :max-date="maxDate"
      v-model="currentDate"
      type="year-month"
      @confirm="confirm"
      @cancel="cancel"
    ></qm-datetime-picker>
    ...
    data() {
      return {
        ... 
        minDate: new Date(1900, 1, 1),
        maxDate: new Date(2100, 12, 31),
        currentDate: new Date(),
      }
    },
    methodes: {
      formatter(type, val) {
        if (type === "year") {
          return val + "年";
        }
        if (type === "month") {
          return val + "月";
        }
        if (type === "day") {
          return val + "日";
        }
        return val;
      },
    },

  更多帮助请查看Vant官网： https://vant-contrib.gitee.io/vant/v2/#/zh-CN/datetime-picker

-->



<template>
  <van-datetime-picker v-bind="$attrs" v-on="$listeners">
    <template v-for="(index, name) in $slots" :slot="name">
      <slot :name="name" /> </template
  ></van-datetime-picker>
</template>

<script>
import { DatetimePicker } from 'vant';
export default {
  inheritAttrs: true,
  components: {
    [DatetimePicker.name]: DatetimePicker,
  },
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-picker__toolbar {
  height: calc(114px * var(--ratio));
}
/deep/ .van-picker__cancel,
/deep/ .van-picker__confirm {
  font-size: var(--font-size-subcontent);
  color: var(--color-text-subtext);
}


/deep/ .van-picker__confirm {
  color: var(--color-text-primary);
}

/deep/ .van-picker__title {
  font-size: var(--font-size-maintitle);
  color: var(--color-text-title);
}

/deep/ .van-picker-column__item {
  color: var(--color-text-title);
}
/deep/ .van-picker-column__item--selected {
  font-size: var(--font-size-maintitle);
}
</style>
